<template>
    <div class="flex-box form-row">
        <div class="form-row__label">
            {{label}}
            <span v-if="required && label" style="color:#F56C6C;">*</span>
        </div>
        <slot class="form-row__item" name="item"></slot>
        <slot class="form-row__item_info" name="info-item"></slot>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        props: {
            label: String,
            required: Boolean
        }
    };
</script>

<style scoped>
    .flex-box {
        display: flex;
        box-sizing: border-box;
    }
    .form-row {
        width: 100%;
        padding: 8px 20px;
        /*border-bottom: 1px solid #d8d8d8;*/
    }
    .form-row__label {
        font-size: 14px;
        color: #8b9ca9;
        width: 160px;
        line-height: 40px;
    }
    .form-row__item {
        width: 280px;
        line-height: 40px;
        margin-right: 30px;
    }
    .form-row__item_info {
        color:#666666;
        font-size: 12px;
        line-height:37px;
    }
    .form-row_no-border-bottom {
        border: none;
    }
    .form-row_no-padding-top {
        padding: 0 20px 0 20px;
    }
</style>
